import { memo, useState } from 'react'
import styles from './index.module.scss'
import { Button, Space, Popconfirm, Divider, Tag, message } from 'antd'
import { Link, useNavigate } from 'react-router-dom'
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  DeleteOutlined,
} from '@ant-design/icons'
import { useRequest } from 'ahooks'
import { duplicateQuestion, updateQuestion } from '@/service/module/question'

type Questionnaire = {
  id: string
  title: string
  isPublished: boolean
  isStar: boolean
  answerCount: number
  createAt: string
}

interface IProps {
  question: Questionnaire
}

const index = memo((props: IProps) => {
  const nav = useNavigate()
  const { question } = props

  // 复制问卷
  const { run: duplicate, loading: duplicateLoading } = useRequest(
    async () => await duplicateQuestion(question.id),
    {
      manual: true,
      onSuccess(result) {
        message.success(result.msg)
        nav(`/question/edit/${result.id}`)
      },
    }
  )

  //假删除
  const [isDeletedState, setIsDeleteState] = useState(false)
  const { run: fakeDele, loading: delLoading } = useRequest(
    async () => await updateQuestion(question.id, { isDeleted: true }),
    {
      manual: true,
      onSuccess: result => {
        message.success(result.msg)
        setIsDeleteState(true)
      },
    }
  )

  //改变问卷的标星
  //记录问卷的初始标星状态
  const [starState, setStarState] = useState(question.isStar)
  const { run: changeStar, loading: changeStarLoading } = useRequest(
    async () => {
      const data = await updateQuestion(question.id, { isStar: !starState })
      return data
    },
    {
      manual: true,
      onSuccess(result) {
        if (result.msg === '操作成功') {
          setStarState(!starState)
        }
        message.success(result.msg)
      },
    }
  )

  //模拟删除
  if (isDeletedState) return

  return (
    <div className={styles.questionItem}>
      <div className={styles.top}>
        <div className={styles.left}>
          <Space>
            {starState && <StarOutlined style={{ color: 'red' }} />}
            <Link
              className={styles.title}
              to={
                question.isPublished
                  ? `/question/static/${question.id}`
                  : `/question/edit/${question.id}`
              }
            >
              {question.title}
            </Link>
          </Space>
        </div>
        <Space>
          {question.isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}
          <span className={styles.answer}>答卷:{question.answerCount}</span>
          <span className={styles.createAt}>{question.createAt}</span>
        </Space>
      </div>
      <Divider />
      <div className={styles.bottom}>
        <div className={styles.left}>
          <Space>
            <Button
              icon={<EditOutlined />}
              type="text"
              size="small"
              onClick={() => nav(`/question/edit/${question.id}`)}
              disabled={question.isPublished}
            >
              编辑问卷
            </Button>
            <Button
              icon={<LineChartOutlined />}
              type="text"
              size="small"
              onClick={() => nav(`/question/static/${question.id}`)}
              disabled={!question.isPublished}
            >
              问卷统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Space>
            <Button
              type="text"
              icon={<StarOutlined />}
              size="small"
              onClick={changeStar}
              disabled={changeStarLoading}
            >
              {starState ? '取消标星' : '标星'}
            </Button>
            <Popconfirm
              title="确定复制该问卷？"
              okText="确定"
              cancelText="取消"
              onConfirm={duplicate}
            >
              <Button type="text" icon={<CopyOutlined />} size="small" disabled={duplicateLoading}>
                复制
              </Button>
            </Popconfirm>

            <Popconfirm
              title="确定删除该问卷？"
              okText="确定"
              cancelText="取消"
              onConfirm={fakeDele}
            >
              <Button type="text" icon={<DeleteOutlined />} size="small" disabled={delLoading}>
                删除
              </Button>
            </Popconfirm>
          </Space>
        </div>
      </div>
    </div>
  )
})

export default index
